<template>
  <div class="container" ref="container" >
    <div>
      
      <div class="loading"></div>
      <div class="product" id="product">
        <!-- <div class="desc">
          <h1 class="title"></h1>
          <p class="content"></p>
        </div> -->
       
        <div class="prod-list">
          <h1>产品推荐</h1>
          <div class="products">
            <div class="prod-item">
              <div class="prod-title"></div>
              <div class="img">
                <img  v-for="(index,num) in data.obk" :key="index.id" @click="postname(index)" :src="index.imgUrl"/>
              </div>
           
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onDeactivated, onMounted } from "vue";
import Base3d from "@/utils/Base3d";
const data = {
  products: [],
  isLoading: true,
  scenes: [],
  pIndex: 0,
  sceneIndex: 0,
  base3d: {},
  descIndex: 0,
  progress: 0,
  model_1: "",
  obk:[{
    id: "0",
      nodelName: "apple.glb",
      imgUrl: "./textures/3DApple001_PREVIEW.jpg",
      hdr:"001"
  },{
    id: "1",
      nodelName: "banana.glb",
      imgUrl: "./textures/xiangjiao.jpg",
      hdr:"004"
  },{
    id: "2",
      nodelName: "pineapple.glb",
      imgUrl: "./textures/boluo.jpg",
      hdr:"005"
  },{
    id: "3",
      nodelName: "oman.glb",
      imgUrl: "./textures/red.jpg",
      hdr:"005"
  },{
    id: "4",
      nodelName: "vegetable.glb",
      imgUrl: "./textures/3DCucumber001_PREVIEW.jpg",
      hdr:"005"
  },{
    id: "5",
      nodelName: "mushroom.glb",
      imgUrl: "./textures/mogu.jpg",
      hdr:"005"
  },{
    id: "6",
      nodelName: "pinecone.glb",
      imgUrl: "./textures/songguo.jpg",
      hdr:"004"
  },{
    id: "7",
      nodelName: "pangxie.glb",
      imgUrl: "./textures/xie.jpg",
      hdr:"003"
  },]
};

onMounted(async () => {
  data.base3d = new Base3d("#product");
  
});

// 

function postname(index) {
  
  //填入模型的名字
  data.base3d.setModel(index.nodelName);
  data.base3d.setEnvMap(index.hdr);
}
</script>

<style lang="less">
// .container{
//   margin-left: 290px;
// }

canvas {
    display: block;
    // margin: 0 auto;
    position: absolute;
  
}

.desc {
  position: fixed;
  z-index: 100000;
  background-color: rgba(255, 255, 255, 0.5);
  width: 600px;
  top: 100px;
  left: 50%;
  margin-left: -300px;
  transition: all 0.5s;

  transform: translate(-100vw, 0);
  padding: 7px;
}
.desc.active {
  transform: translate(0, 0);
}
.prod-list {
  //height: 100vh;
  padding: 20px 0 0;
  position: fixed;
  z-index: 100000;
  transition: all 0.5s;
  background-color: rgba(255, 255, 255, 0.8);
  left: 0;
  top: 0;
  h1 {
    font-size: 20px;
    font-weight: 900;
    padding: 5px 10px 0;
  }
  img {
        width: 80px;
        box-shadow: 2px 2px 5px #666, 0px 0px 10px red;
        &.active {
        box-shadow: 2px 2px 5px #666, 0px 0px 10px red;
      }
      &:hover {
        transform: translate(0px, -5px);
        box-shadow: 2px 2px 5px #666, 0px 0px 10px orangered;
        // background-color: orange;
      }
      }
  .products {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
    .prod-item {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      // align-items: center;
      width: 80px;
      background-color: #ffffff7b;
      border-radius: 20px;
      overflow: hidden;
      // margin: 10px 5px;
      box-shadow: 2px 2px 5px #666;
      transition: all 0.3s;
    
      
      .prod-title {
        padding: 10px 10px;
      }
    }
  }
}
.prod-list.hidden {
  transform: translate(-100%, 0);
}
</style>
